<template>
  <div class="userOriginClass" ref="userOriginRef">
    <Row class="buttonRowClass">
      <ButtonGroup>
        <Button type="primary" @click="saveUser">
          <Icon type="md-add"/>添加用户
        </Button>
        <Button style="color:red;" @click="deleteUser">
          <Icon type="md-close" />删除用户
        </Button>
      </ButtonGroup>
      <SearchInput :value.sync="inputValue" @on-clear="getTableData" @on-click="getTableData" style="right: 0;position: absolute;"/>
    </Row>
    <Row>
      <Table
        stripe
        :loading="tableLoading"
        size="small"
        :width="tableWidth"
        :columns="tableColumns"
        :data="tableDatas"
        :height="tableHeight"
        @on-selection-change="handleSelectionChange">
        <template slot-scope="{ row, index }" slot="operation">
          <Button
            type="primary"
            size="small"
            @click="saveUser(row)">
            <i class="fa fa-pencil-square-o" aria-hidden="true" /> 编辑
          </Button>
        </template>
      </Table>
    </Row>
    <template>
      <Drawer :title="sideTitle" v-model="showSide" :width="650">
        <component :is="component" :params="params" @refresh="getTableData" ref="addEditRef"/>
      </Drawer>
    </template>
  </div>
</template>
<script>
import { findUserData, deleteUser } from '@/api/user'
export default {
  computed: {
  },
  data() {
    return {
      inputValue: '',
      tableLoading: false,
      tableColumns: [
        {
          title: '选择',
          width: 40,
          key: 'selection',
          type: 'selection',
          fixed: 'left',
          align: 'center',
          className: 'compact-cell'
        },
        {
          title: '序号',
          width: 50,
          key: 'index',
          type: 'index',
          fixed: 'left',
          align: 'center',
          className: 'compact-cell'
        },
        {
          title: '操作',
          slot: 'operation',
          align: 'center',
          width: 80,
          fixed: 'left'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '登录账号',
          key: 'account'
        },
        {
          title: '角色',
          key: 'isadmin',
          render(h, paras) {
            return h('span', paras.row.isadmin?'是':'否')
          }
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '性别',
          key: 'gender'
        }
      ],
      params: {},
      sideWidth: 0,
      showSide: false,
      sideTitle: '',
      component: null,
      tableDatas: [],
      tableHeight: 500,
      tableWidth: 500,
      tableSelected: [],
    }
  },
  methods: {
    /**
     * @Autor: zhangwei
     * @Date: 2021-01-25 13:58:42
     * @Description: 保存用户
     */
    saveUser(row) {
      this.sideTitle = (row.id?'编辑':'添加')+'用户信息'
      this.sideIcon = 'fa fa-plus'
      this.sideWidth = 500
      this.showSide = true
      this.params = {
        user: row.id?Object.assign({},row):null
      }
      import('./add-edit').then(comp => {
        this.component = comp.default
      })
    },
    /**
     * @Autor: zhangwei
     * @Date: 2021-01-25 11:16:36
     * @Description: 获取table数据
     */
    getTableData() {
      this.showSide = false
      this.tableLoading = true
      findUserData({query: this.inputValue}).then(res => {
        if(res.data.state=='ok') {
          this.tableDatas = res.data.data
        }else {
          this.$Notice.error({title:'提示', desc: res.data.msg})
        }
        this.tableLoading = false
      })
    },
    /**
     * @Autor: zhangwei
     * @Date: 2021-01-25 11:10:33
     * @Description: table选中事件
     */
    handleSelectionChange(selected) {
      this.tableSelected = selected
    },
    /**
     * @Autor: zhangwei
     * @Date: 2021-01-25 17:38:03
     * @Description: 删除用户
     */
    deleteUser() {
      if(!this.tableSelected.length) return this.$Notice.error({title:'提示', desc: '请至少选择一个用户'})
      let ids = this.tableSelected.map(data => {
        return data.id
      })
      deleteUser({ids: ids.join(',')}).then(res => {
        this.$Notice[res.data.state=='ok'?'success':'error']({title:'提示', desc: res.data.msg})
        this.getTableData()
      })
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.tableHeight = this.$refs.userOriginRef.offsetHeight-76
      this.tableWidth = this.$refs.userOriginRef.offsetWidth-30
      this.getTableData()
    })
  }
}
</script>
<style>
.userOriginClass {
  height: 100%;
  padding: 18px;
}
.userOriginClass .buttonRowClass {
  margin-bottom: 10px;
  position: relative;
}
.userOriginClass .compact-cell .ivu-table-cell {
  padding-left: 5px;
  padding-right: 5px;
}
</style>
